<template>
	<view>
		<navbar></navbar>
		<view>
			<view class="">
				<view class="topInfo">
					<view class="goods_name">
						{{topInfo.goods_name}}
					</view>
					<view class="num">
						<span>发行{{topInfo.total_num}}</span>
						<span>流通{{topInfo.market_num}}</span>
					</view>
				</view>
				<view class="mark"></view>
				<image class="top_Img" :src="topInfo.goods_image" mode=""></image>
			</view>
			
		</view>
		<view class="page_list">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll"
				refresher-enabled
				enable-back-to-top
				@refresherpulling="refresherrefresh"
				:refresher-triggered="refresherStatus">
				<view class="list" v-for="item in assets.list" :key="item.id" @tap.stop.prevent="gotoDetail(item.id)">
					
					<view class="">
						<view class="goods_name">
							<span>{{item.goods_name}}</span>
							<span :class="item.can_buy?'sale':'lock'">{{item.can_buy?'寄售':'锁定中'}}</span>
						</view>
						<view class="goods_sort">
							<span style="font-weight: 600;">#{{item.sort_no}}</span>/{{item.market_num}}
						</view>
					</view>
					<view class="goods_price">
						<span>￥{{item.sale_price}}</span>
						<uni-icons style="margin-left: 20rpx;" type="forward" size="10"></uni-icons>
					</view>
				</view>
				<view v-if="!this.assets.hasMore && 0 !== assets.list.length" style="color: #B5B5B5;font-style: 18rpx;display: flex;justify-content: center;padding: 10rpx;">
					已经到底啦
				</view>
				<view v-if="!assets.loading && 0 == assets.list.length" class="yoshop-notcont">
					<text class="iconfont icon-wushuju"></text>
					<view class="cont">已退市</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	export default {
		components: {
			navbar
		},
		data() {
			return {
				refresherStatus: false,
				topInfo: {},
				name: '',
				scrollTop: 0,
				assets: {
					page: 1,
					loading: false,
					hasMore: false,
					list: []
				},
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad(options) {
			this.name = options.name;
			console.log(this.name)
		},
		onShow() {
			if(this.name != ''){
				this.requestData();
				this.getCollectDetail()
			}
		},
		onPullDownRefresh() {
			this.assets.page = 1;
			if(this.name != ''){
				this.requestData(() => {
					uni.stopPullDownRefresh();
				});
			}
		},
		methods: {
			refresherrefresh(){
				let _this = this
				_this.refresherStatus = true
				this.assets.page = 1;
				if(this.name != ''){
					this.requestData(() => {
						_this.refresherStatus = false
					});
				}	
			},
			//	获取藏品信息 头部
			getCollectDetail(){
				app._get('ordersale/getCollectDetail', {
					page: 1,
					order_by: 'sale_price',
					sort_by: 'asc',
					search: this.name
				}, (res) => {
					this.topInfo = res.data	
				}, null, () => {
				})
			},
			gotoDetail(id){
				app.navigationTo(`pages/market/detail/detail?id=${id}`)
			},
			// 滑动触顶
			upper: function(e) {
				// console.log(e)
			},
			// 滑动触底
			lower: function(e) {
				if (this.assets.hasMore && !this.assets.loading) {
					this.requestData();
				}
			},
			// 滑动
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 回顶部
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			requestData(callback) {
				this.assets.loading = true;
				uni.showLoading();
				app._get('ordersale/salelists', {
					page: this.assets.page,
					order_by: 'sale_price',
					sort_by: 'asc',
					search: this.name
				}, (res) => {
					let {
						data,
						total
					} = res.data;
					let {
						page,
						list,
						hasMore
					} = this.assets;
					if (1 == page) {
						list.length = 0;
					}
					list = [...list, ...data];
					hasMore = total > list.length;
					if (hasMore) {
						page++;
					}
					this.assets.page = page;
					this.assets.list = list;
					this.assets.hasMore = hasMore;
			
				}, null, () => {
					this.assets.loading = false;
					uni.hideLoading();
					callback && callback();
				})
			},
		}
	}
</script>

<style lang="scss">
.topInfo{
	position: absolute;
	top: 0;
	z-index: 999;
	width: 100%;
	.goods_name{
		text-align: center;
		width: 300rpx;
		position: relative;
		top: 100rpx;
		left: 50%;
		margin-left: -150rpx;
		color: #fff;
		font-weight: 600;
		font-size: 36rpx;
	}
	.num{
		text-align: center;
		width: 400rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		top: 200rpx;
		left: 50%;
		margin-left: -200rpx;
		color: #fff;
	}
}
.mark{
	position: absolute;
	top: 0;
	height: 400rpx;	
	width: 100%;
	background-color: #000000;
	filter: blur(15rpx);
	z-index: 998;
	opacity: 0.2;
}
.top_Img{
	position: relative;
	top: 0;
	height: 400rpx;	
	width: 100%;
	filter: blur(15rpx);
	z-index: 997;
}
.page_list{
	display: flex;
	justify-content: center;
	align-items: center;
	.scroll-Y{
		background-color: #277dff;
		margin: 30rpx;
		border-radius: 20rpx;
		height: 800rpx;
		background-color: #fff;
		padding: 10rpx;
		.list{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 1rpx #F3F3F3 solid;
			.goods_sort{
				margin-top: 8rpx;
			}
			.goods_price{
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 36rpx;
			}
			.sale{
				background-color: #E5FBDF;
				color: #8abc8c;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				margin-left: 15rpx;
				font-size: 28rpx;
			}
			.lock{
				background-color: #E8E8E8;
				color: #565656;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				margin-left: 15rpx;
				font-size: 28rpx;
			}
		}
	}
}
</style>
